<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约管理</title>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <script src="js/vue@2.7.10.js"></script>
    <script src="/element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/utils.js"></script>
    <style>
        .demo-table-expand {
            font-size: 0;
        }

        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }

        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <el-tabs v-model="activeTab" @tab-click="handleClick">
            <el-tab-pane label="新预约处理" name="first">
                <template>
                    <el-table
                            :data="tableData"
                            style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-steps :active="getAppointmentStatus(props.row.status)" finish-status="success">
                                    <el-step title="用户发起预约"></el-step>
                                    <el-step title="商家确认预约"></el-step>
                                    <el-step title="用户到店体验服务"></el-step>
                                </el-steps>
                                <el-button style="margin-top: 12px;" @click="nextStep(props.row)">下一步</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="预约服务时间"
                                prop="appointmentTime">
                        </el-table-column>
                        <el-table-column
                                label="服务项目"
                                prop="serviceId">
                        </el-table-column>
                        <el-table-column
                                label="服务员工"
                                prop="employeeId">
                        </el-table-column>
                        <el-table-column
                                label="下单用户"
                                prop="userId">
                        </el-table-column>
                        <el-table-column
                                label="预约状态"
                                prop="status">
                        </el-table-column>
                    </el-table>
                </template>
            </el-tab-pane>
            <el-tab-pane label="全部预约" name="third">
                <template>

                    <el-table
                            :data="tableData_All"
                            :row-class-name="tableRowClassName"
                            border
                            style="width: 100%">
                        <el-table-column
                                label="预约服务时间"
                                prop="appointmentTime">
                        </el-table-column>
                        <el-table-column
                                label="服务项目"
                                prop="serviceId">
                        </el-table-column>
                        <el-table-column
                                label="服务员工"
                                prop="employeeId">
                        </el-table-column>
                        <el-table-column
                                label="下单用户"
                                prop="userId">
                        </el-table-column>
                        <!-- 如果有时间 这里可以展示用户的累计消费 消费习惯等细节 当然 要给user加一张表，存储用户画像 -->
                    </el-table>
                </template>
            </el-tab-pane>
        </el-tabs>
    </template>
</div>
</body>

<script>
    new Vue({
        el: "#app",
        mounted() {
            Promise.all(
                // 获取所有的 User Service Employee
                [axios.get('/user').then(res => {
                    if (res.data.code === 1) {
                        this.userData = res.data.data;
                    }
                }),
                axios.get('/service').then(res => {
                    if (res.data.code === 1) {
                        this.serviceData = res.data.data;
                    }
                }),
                axios.get('/employee').then(res => {
                    if (res.data.code === 1) {
                        this.employeeData = res.data.data;
                    }
                })]
            ).then(() => {
                this.initFirst()
            });

        },
        methods: {
            initFirst() {
                axios.get('/appointment/new').then(res => {
                    if (res.data.code === 1) {
                        this.tableData = res.data.data.map(item => {
                            return {
                                ...item,
                                userId: this.userData.find(user => user.id === item.userId).name,
                                serviceId: this.serviceData.find(service => service.id === item.serviceId).name,
                                employeeId: this.employeeData.find(employee => employee.id === item.employeeId).name,
                                appointmentTime: convertTimeFormat(item.appointmentTime)
                            }
                        });
                    }
                });
                axios.get('/appointment').then(res => {
                    if (res.data.code === 1) {
                        this.tableData_All = res.data.data.map(item => {
                            return {
                                ...item,
                                userId: this.userData.find(user => user.id === item.userId).name,
                                serviceId: this.serviceData.find(service => service.id === item.serviceId).name,
                                employeeId: this.employeeData.find(employee => employee.id === item.employeeId).name,
                                appointmentTime: convertTimeFormat(item.appointmentTime)
                            }
                        })
                    }
                });
            },
            initSecond() {
            },
            initThird() {
            },
            handleClick(tab, event) {
                if (tab.name === 'first') {
                    this.initFirst();
                } else if (tab.name === 'second') {
                    this.initSecond();
                } else if (tab.name === 'third') {
                    this.initThird();
                }
            },
            getAppointmentStatus(status) {
                if (status === 'init') return 1;
                if (status === 'confirmed') return 2;
                if (status === 'completed') return 3;
                else return 0;
            },
            nextStep(row) {
                if (row.status === 'init') {
                    row.status = 'confirmed';
                    // 数据库同步
                    axios.put(`/appointment/nextStep`, {
                        id: row.id,
                        status: row.status
                    }).then(res => {
                        if (res.data.code === 1) {
                            this.initFirst();
                        } else {
                            row.status = 'init';
                        }
                    });
                } else if (row.status === 'confirmed') {
                    row.status = 'completed';
                    axios.put(`/appointment/nextStep`, {
                        id: row.id,
                        status: row.status
                    }).then(res => {
                        if (res.data.code === 1) {
                            this.initFirst();
                        } else {
                            row.status = 'confirmed';
                        }
                    });
                }
            }
        },
        data: function () {
            return {
                activeTab: 'first',
                userData: [],
                serviceData: [],
                employeeData: [],
                tableData: [],
                tableData_All: []
            }
        }
    })
</script>
</html>